<template>
  <div class="shareinfo">
    <hmNanBar :path="path"></hmNanBar>
    <!-- 文章 -->
    <div class="concent">
      <h3 class="title">{{ info.title }}</h3>
      <ul class="other">
        <li class="o1">{{ info.updated_at | formatTime }}</li>
        <li class="iconfont">&#xe644;</li>
        <li class="o2">{{ info.read }}</li>
        <li class="iconfont">&#xe638;</li>
        <li class="o3">{{ info.star }}</li>
      </ul>
      <div class="txt" v-html="info.content"></div>
    </div>
    <div class="line"></div>
    <!-- 评论区 -->
    <div class="comment">
      <h3 class="comment-title">评论 <span>87</span></h3>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多评论了"
        @load="load"
      >
        <div class="comment-item" v-for="(item, index) in list" :key="index">
          <div class="item-top">
            <img
              class="c1"
              v-if="item.author.avatar"
              :src="$baseUrl + item.author.avatar"
              alt=""
              @click="reComment(item)"
            />
            <img
              class="c1"
              v-else
              src="@/assets/曾小贤.jpg"
              @click="reComment(item)"
              alt=""
            />
            <div class="c2">
              <div class="top">{{ item.author.nickname }}</div>
              <div class="bottom">{{ item.created_at | formatTime }}</div>
            </div>
            <div
              class="c3"
              @click="starComment(item)"
              :class="{
                reds: gettersTate('starComments', +item.id)
              }"
            >
              {{ item.star }}
            </div>
            <i
              class="iconfont"
              @click="starComment(item)"
              :class="{
                reds: gettersTate('starComments', +item.id)
              }"
              >&#xe638;</i
            >
          </div>
          <div class="item-content">{{ item.content }}</div>
          <div class="item-recomment" v-if="item.children_comments.length">
            <div
              class="recomment"
              v-for="(item2, index2) in item.children_comments"
              :key="index2"
            >
              <span class="name">{{ item2.author }}:</span>
              <span class="tex">{{ item2.content }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 发表评论 -->
    <div class="footer">
      <div class="send-comment">
        <div class="f1" @click="show = true">你也说两句把~</div>
        <div
          @click="collectEvent"
          class="f2"
          :class="{
            reds: gettersTate('collectArticles', +id)
          }"
        >
          <div class="iconfont">&#xe63c;</div>
          <div class="num">{{ info.collect }}</div>
        </div>
        <div
          @click="starClick"
          class="f2"
          :class="{
            reds: gettersTate('starArticles', +id)
          }"
        >
          <div class="iconfont">&#xe639;</div>
          <div class="num">{{ info.star }}</div>
        </div>
        <div class="f2">
          <div class="iconfont">&#xe63e;</div>
          <div class="num">{{ info.share }}</div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <div class="send-area">
        <van-field
          class="fied"
          v-model="inputValue"
          type="textarea"
          maxlength="50"
          rows="3"
        ></van-field>
      </div>
      <div class="send">
        <span v-if="inputValue != ''" @click="send" class="red">发送</span>
        <span v-else class="no-send">发送</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  articlesShareId,
  articlesCommentsId,
  articlesComments,
  articlesCollect,
  articlesStar,
  articleCommentsStar
} from '@/api/find.js'
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['gettersTate'])
  },
  data () {
    return {
      id: this.$route.params.id,
      path: this.$route.query.path,
      info: '',
      loading: false,
      finished: false,
      currPage: 1,
      pageSize: 3,
      list: [],
      show: false,
      inputValue: '',
      parent: '',
      parentObj: ''
    }
  },
  // 监听输入框的变化
  watch: {
    show (newVal) {
      if (!newVal) {
        this.inputValue = ''
      }
    }
  },
  // 渲染文章列表
  async created () {
    const res = await articlesShareId(this.id)
    this.info = res.data.data
    // window.console.log(res)
  },
  methods: {
    // 渲染评论列表
    async load () {
      // 调用api获取数据
      const res = await articlesCommentsId(this.id, {
        start: (this.currPage - 1) * this.pageSize,
        limit: this.pageSize
      })
      // 将列表数据累加到数组
      this.list.push(...res.data.data.list)
      this.currPage++
      // 让loading变为false
      this.loading = false
      // 判断是否是最后一页
      if (this.list.length >= res.data.data.total) {
        this.finished = true
      }
    },
    // 点击发送
    async send () {
      const res = await articlesComments({
        content: this.inputValue,
        article: this.id,
        parent: this.parent
      })
      this.show = false
      // this.inputValue = ''
      if (this.parent !== '') {
        this.parentObj.children_comments.push(res.data.data)
      } else {
        res.data.data.star = 0
        this.list.unshift(res.data.data)
        window.console.log(res)
      }
    },
    reComment (item) {
      // 打开弹窗
      this.show = true
      // 存入id
      this.parent = item.id
      this.parentObj = item
    },
    // 关于收藏
    async collectEvent () {
      const res = await articlesCollect({ id: this.id })
      if (res.data.data.list.includes(this.id * 1)) {
        this.$toast.success('收藏成功')
      } else {
        this.$toast.fail('取消收藏')
      }
      this.info.collect = res.data.data.num
      // 调用异步修改
      this.$store.dispatch('getUserIndo')
    },
    // 关于文章点赞
    async starClick () {
      const res = await articlesStar({ article: this.id })
      if (res.data.data.list.includes(this.id * 1)) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.fail('取消点赞')
      }
      this.info.star = res.data.data.num
      // 调用异步修改
      this.$store.dispatch('getUserIndo')
    },
    // 关于评论点赞
    async starComment (item) {
      const res = await articleCommentsStar({ id: item.id })
      if (res.data.data.list.includes(+item.id)) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.fail('取消点赞')
      }
      item.star = res.data.data.num
      // 调用异步修改
      this.$store.dispatch('getUserIndo')
    }
  }
}
</script>

<style lang="less" scoped>
.shareinfo {
  .concent {
    padding: 0 @p15;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 800;
      text-align: left;
      color: #181a39;
      line-height: 25px;
      padding-top: 19px;
      padding-bottom: 9px;
    }
    .other {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #b4b4bd;
      line-height: 16px;
      letter-spacing: 0px;
      display: flex;
      padding-bottom: 28px;
      .o1 {
        flex: 1;
      }
      .o2 {
        padding-right: 10px;
      }
      .o3 {
        padding-right: 20px;
      }
    }
    .txt {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 27px;
      letter-spacing: 0px;
      ::v-deep img {
        width: 100%;
      }
    }
  }
  .line {
    margin-top: 20px;
    background: #f7f4f5;
    height: 11px;
  }
  .comment {
    padding: 0 @p15;
    padding-top: 25px;
    .comment-item {
      padding-bottom: 20px;
    }
    .comment-title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      position: relative;
      margin-bottom: 30px;
      span {
        position: absolute;
        top: -5px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #b4b4bd;
        line-height: 16px;
        letter-spacing: 0px;
      }
    }
    .item-top {
      display: flex;
      align-items: center;
      color: #ccc;
      font-size: 12px;
      margin-bottom: 10px;
      .c1 {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .c2 {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #545671;
        line-height: 16px;
        letter-spacing: 0px;
        flex: 1;
        .top {
          color: #000;
        }
        .bottom {
          color: #ccc;
          font-weight: normal;
        }
      }
    }
    .item-content {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 27px;
      letter-spacing: 0px;
      margin-bottom: 9px;
      padding-left: 45px;
    }
    .item-recomment {
      margin-left: 45px;
      background: #f7f4f5;
      padding: 0 15px;

      .recomment {
        word-wrap: break-word;
        word-break: break-all;
      }
      .name {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #545671;
        line-height: 20px;
        letter-spacing: 0px;
      }
      .tex {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 400;
        text-align: left;
        color: #9595a6;
        letter-spacing: 0px;
        margin-left: 10px;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 @p15;
    background: #fff;
    .send-comment {
      height: 60px;
      display: flex;
      padding-top: 13px;
      .f1 {
        flex: 1;
        width: 180px;
        height: 34px;
        background: #f7f4f5;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b4b4bd;
        line-height: 34px;
        letter-spacing: 0px;
        padding-left: 10px;
      }
      .f2 {
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #b4b4bd;
        line-height: 16px;
        letter-spacing: 0px;
        margin-left: 23px;
        .iconfont {
          font-size: 28px;
          margin-bottom: 5px;
        }
      }
    }
  }
  .send-area {
    padding: 25px 15px 5px 15px;
    .fied {
      background: #f7f4f5;
    }
  }
  .send {
    text-align: right;
    padding: @p15;
    .red {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 0px;
      color: red;
    }
    .no-send {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #b4b4bd;
      line-height: 22px;
      letter-spacing: 0px;
    }
  }
  .reds {
    color: red !important;
  }
}
</style>
